<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>jQuery的ajax支持Promise</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<h1>jQuery的ajax支持Promise</h1>
		<div class="box">
			<button id="btn1">ajax1</button>
			<button id="btn2">ajax2</button>
			<button id="btn3">ajax3</button>
		</div>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
		// https://www.hangge.com/blog/cache/detail_2020.html
		// https://www.cnblogs.com/qianjinyan/p/10871263.html 
		// 
		var ajaxUrl = 'http://localhost/ajax/ajax3.php?t=0'
		// https://github.com/typicode/json-server
		ajaxUrl = 'http://jsonplaceholder.typicode.com/posts?id=1&id=2'
		btn1.onclick = (evt) => {
			var that = evt.target ;
			$.ajax({
				type: 'GET',
				url: ajaxUrl,
				dataType: 'json',
				success: function(data) {
					console.log(that.id, data)
				},
				error: function(error) {
					console.warn(that.id, data)
				}
			})
		}

		btn2.onclick = (evt) => {
			var that = evt.target ;
			$.ajax(ajaxUrl).done(function(data) {
				console.log(that.id, data)
			}).fail(function(error) {
				console.warn(that.id, data)
			})
		}
		btn3.onclick = (evt) => {
			var that = evt.target ;
			$.ajax(ajaxUrl).then(function(data) {
				console.log(that.id, data)
			}, function(error) {
				console.warn(that.id, data)
			})
		}
	</script>
</body>
</html>